<template>
  <div class="b-article-recycled-form">
    <el-row :gutter="10">
      <el-col :span="3" class="status">
        <div class="grid-content bg-purple">
          <label for="sortField">排序字段:</label>
          <el-select
            name="sortField"
            v-model="sort.field"
            placeholder="所有"
            size="medium"
            popper-class="b-select"
          >
            <el-option value="sort" label="排序"></el-option>
            <el-option value="hits" label="阅读"></el-option>
            <el-option value="collect" label="收藏"></el-option>
            <el-option value="like" label="点赞"></el-option>
            <el-option value="replies" label="回复"></el-option>
            <el-option value="createTime" label="创建时间"></el-option>
            <el-option value="updateTime" label="修改时间"></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="grid-content bg-purple">
          <label for="cate">分类:</label>
          <el-select
            name="cate"
            v-model="cate"
            placeholder="请选择分类   "
            :multiple="true"
            size="medium"
            popper-class="b-select"
          >
            <el-option
              v-for="cateItem in cateOptions"
              :key="cateItem.value"
              :label="cateItem.label"
              :value="cateItem.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="7" class="create-time">
        <label for="createTime">删除时间:</label>
        <el-date-picker
          name="createTime"
          v-model="createTime"
          type="daterange"
          size="medium"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="3" class="status">
        <div class="grid-content bg-purple">
          <label for="sortMode">排序方式:</label>
          <el-select
            name="sortMode"
            v-model="sort.mode"
            placeholder="所有"
            size="medium"
            popper-class="b-select"
          >
            <el-option value="1" label="升序"></el-option>
            <el-option value="0" label="降序"></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="grid-content bg-purple">
          <label for="tag">标签:</label>
          <el-select
            name="tag"
            v-model="tag"
            placeholder="请选择标签"
            :multiple="true"
            size="medium"
            popper-class="b-select"
          >
            <el-option
              v-for="tagItem in tagOptions"
              :key="tagItem.value"
              :label="tagItem.label"
              :value="tagItem.value"
              seletced
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="7" class="title">
        <label for="title">文章标题:</label>
        <el-input
          name="title"
          v-model="title"
          placeholder="请输入标题"
        ></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-button type="primary" size="small">查询</el-button>
        <el-button size="small">重置</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "BArticleForm",
  data() {
    return {
      tagOptions: [
        { value: "1", label: "前端" },
        { value: "2", label: "后端" },
        { value: "3", label: "生活" },
        { value: "4", label: "管理" },
        { value: "5", label: "随笔" }
        // { value: 'a', label: '' }
      ],
      cateOptions: [
        { value: "1", label: "技术文章" },
        { value: "2", label: "生活随笔" },
        { value: "3", label: "团队管理" },
        { value: "4", label: "学习笔记" }
        // { value: 'a', label: '' }
      ],
      statusOptions: [
        { value: "isIndex", label: "推荐首页" },
        { value: "isShow", label: "显示" },
        { value: "isHot", label: "热门" },
        { value: "isTop", label: "置顶" },
        { value: "isElite", label: "精华" },
        { value: "isOriginal", label: "原创" }
      ],
      tag: ["1", "2", "3", "4", "5"],
      cate: ["1", "2", "3", "4"],
      status: {
        isIndex: "",
        isShow: "",
        isHot: "",
        isTop: "",
        isElite: "",
        isOriginal: ""
      },
      sort: { field: "sort", mode: "1" },
      createTime: [],
      updateTime: [],
      title: ""
    };
  },
  methods: {
    changeTag() {
      console.log(this.tag);
    }
  }
};
</script>
<style scoped>
.b-article-recycled-form {
  margin-top: 30px;
}
.el-row {
  margin: 18px 0;
}
label {
  margin-right: 8px;
  font-size: 14px;
}
[class*="el-col-"] {
  text-align: left;
}
.b-select {
  width: 100%;
}
.el-select {
  width: 90%;
}
.status .el-select {
  width: 60%;
}
.create-time .el-date-editor,
.update-time .el-date-editor {
  width: 81%;
}
.title .el-input {
  width: 81%;
}
/* .el-date-table th{
        padding: 20px 5px
    } */
</style>
